<!DOCTYPE html>
<html>
  <head>
    <meta name="screen-orientation" content="portrait" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
    />
    <title>新年快乐 — 岭南年会抽奖系统</title>
    <link
      href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.5.7/css/layui.css"
      type="text/css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <!--引入vue-->
    <script
      src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
      type="application/javascript"
    ></script>
  </head>
  <body>
    <!--主容器，显示词云-->
    <div id="main" class="wall"></div>

    <!--显示右下角的工具按钮-->
    <div id="app" class="tools" v-cloak>
      <div id="result_new" v-show="running !== 2 && !showResult" class="result_new">
        <img :src="prizes[position].url" />
        <div class="success_new">
          {{prizes[position].person==""?prizes[position].name:"中奖人："+prizes[position].person}}
        </div>
      </div>

      <button
        @click="toggle"
        class="pure-button"
        :class="running!=1?'button-error':'button-secondary'"
      >
        <!--显示抽奖结果时，显示继续-->
        {{showResult ? "继续" : status[running]}}
      </button>
      <button class="pure-button button-secondary" @click="showList" v-show="running !== 2 || position >= prizes.length -1">
        结果
      </button>
      <!-- 重新抽上一个 -->
      <button
        class="pure-button button-success"
        @click="retryPrevious"
        v-show="running === 2"
      >
        重抽
      </button>
      <!--显示抽奖结果-->
      <button class="pure-button button-warning" @click="reset">重置</button>
      <button class="pure-button button-success" @click="toggleFullScreen">
        {{fullState}}
      </button>
      <!--显示抽奖的结果-->
      <transition name="fade">
        <!--展示页面-->
        <div
          id="result"
          class="result"
          v-if="running == 2 || showResult"
          :style="{backgroundImage:!showResult?'url(img/alert.png)':'none'}"
        >
          <div class="couplet">蛇舞春风财源茂</div>

          <div class="display" v-if="!showResult">
            <!--输出抽奖结果-->
            <img :src="prizes[position].url" />
            <div class="down">
              <div class="item1">{{prizes[position].name}}</div>
              <div class="item2">{{prizes[position].person}}</div>
            </div>
          </div>
          <!--输出中奖名单-->
          <div class="displays" v-else>
            <ul>
              <li v-for="item of prizesRverese" :style="style[item.level-1]">
                <img :src="item.url" />
                <div class="success">
                  <div class="span">
                    {{item.person==""?item.name:"中奖人："+item.person}}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="couplet">年逢好运事业兴</div>
        </div>
      </transition>
    </div>

    <!--引入jq-->
    <script
      src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/zepto/1.2.0/zepto.min.js"
      type="application/javascript"
    ></script>
    <!--引入layui-->
    <script
      src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layui/2.5.7/layui.all.js"
      type="application/javascript"
    ></script>
    <!--引入词云插件-->
    <script type="text/javascript" src="js/tagcanvas.js"></script>
    <!--默认的名单-->
    <script type="text/javascript" src="js/member.js"></script>

    <script type="text/javascript">
      /*页面加载完毕之后*/

      (function () {
        /*画布DOM*/
        var canvas;

        let temp = [];

        member.forEach(function (item, index) {
          temp.push({ name: item, index: index });
        });
        member = temp;

        /*清除抽奖记录*/
        localStorage.clear();

        /*监控窗口大小变化，及时重绘canvas*/
        window.onresize = function () {
          /*窗口大小发生变化*/

          /*移除词云*/
          $('#myCanvas').remove();

          /*移除滤镜*/
          $('#main').removeClass('mask');

          /*重新创建词云*/
          createCanvas(vm);

          /*将抽奖状态归0*/
          vm.running = 0;
        };

        /*从本地存储获取当前被选中过的人员名单*/
        var choosed = JSON.parse(localStorage.getItem('choosed')) || {};

        /*词云的旋转速度*/
        var speed = function () {
          return [0.2, 0.08];
        };

        /*创建名单列表*/
        var createHTML = function (self) {
          /*创建词云列表*/
          var html = ['<ul>'];

          /*遍历存储好的人员名单*/

          let max = member.length;

          console.log(choosed);

          member.forEach(function (item, index) {
            item.index = index;

            /*  if(index == 2){

                        /!*写入不同的奖品图片*!/
                        if(self.currentLevel == 0){

                            html.push('<li><a href="#"><img style="width: 50px" src="img/1.jpg"/></a></li>');
                        }
                    }

                    if(index == Math.ceil(max/2)){

                        /!*写入不同的奖品图片*!/
                        if(self.currentLevel <= 2 && self.currentLevel>=0) {
                            html.push('<li><a href="#"><img style="width: 50px" src="img/2.jpg"/></a></li>');
                        }

                    }*/

            /*   if(index == (max-2)){

                        /!*写入不同的奖品图片*!/
                        if(self.currentLevel <= 3 && self.currentLevel>=0) {
                            html.push('<li><a href="#"><img style="width:  50px" src="img/3.jpg"/></a></li>');
                        }

                    }*/

            /*如何已经被抽奖抽中了，显示黄色的名字*/
            console.log(!choosed[item.name]);

            if (!choosed[item.name]) {
              html.push('<li><a href="#">' + item.name + '</a></li>');
            }
          });

          html.push('</ul>');

          return html.join('');
        };

        /*创建并重绘画布*/
        var createCanvas = function (self) {
          /*创建画布*/
          canvas = document.createElement('canvas');
          /*设置好ID*/
          canvas.id = 'myCanvas';
          /*设置画布的大小*/
          canvas.width = document.body.offsetWidth;
          /*设置画布的高度*/
          canvas.height = document.body.offsetHeight;
          /*将画布添加到网页渲染*/
          document.getElementById('main').appendChild(canvas);

          /*设置画布的内部html*/
          canvas.innerHTML = createHTML(self);

          /*词云开始绘制*/
          /*第一个参数是画布的dom
           * 第二个参数是 词云的列表dom（ul、li），如果列表是直接插入canvas 的innerhtml则无需指定
           * */
          TagCanvas.Start('myCanvas', '', {
            textColour: '#FFD700',
            initial: speed(),
            textHeight: 42,
            zoom: 1.05,
            dragControl: true,
          });
        };

        /*
         * @抽奖算法
         *
         * @第一步：通过过滤（filter）把中过奖的人排除
         * @第二步：遍历所有剩下的名字，随机生成一个分数对象。与代表每个人的对象合并
         * @第三步：从0开始，截取指定的抽奖数量的元素
         * @第四步：标记被抽中的人员，改变其显示的颜色。
         *
         * @最后，将被抽中的人员名单对象，json序列化存入localstorage对象
         * */
        var lottery = function (count, length, position,  isNormal) {
          /*获取画布内a标签*/
          var list = canvas.getElementsByTagName('a');

          var color = 'yellow';

          var ret = member

            /*过滤成员，如果没有在已被抽中的名单内，则返回该元素组成新数组*/
            .filter(function (m, index) {
            // 添加索引属性到 m 对象中
                m.index = index;

                // 检查元素是否不在已被抽中的名单内
                const notChoosed = !choosed[m.name];

                // 根据 length 和 position 的条件决定是否要过滤1-16的索引
                const shouldFilter1To16 = length - position <= 2;
                const shouldFilter1To1and2 = length - position == 2;

                // 如果长度和位置条件满足且索引在1-16之间，则保留；
                // 如果长度和位置条件不满足，则排除1-16之间的索引。
                if(isNormal) return notChoosed;
                return notChoosed && (
                shouldFilter1To16 ? (index >= 0 && index <= 15) : !(index >= 0 && index <= 1)
                )
                && (
                shouldFilter1To1and2 ? (index >= 0 && index <= 1) : !(index >= 0 && index <= 1)
                );
            })
            /*遍历元素进行处理*/
            /*m代表单个元素*/
            .map(function (m) {
              /*m是一个对象*/

              /*合并两个对象*/
              let ob = Object.assign(
                {
                  score: Math.random(),
                },
                m
              );

              /*作为新元素*/
              return ob;
            })
            /*排序*/
            .sort(function (a, b) {
              return a.score - b.score;
            })
            /*截取数组*/
            .slice(0, count)

            /*遍历循环元素*/
            .map(function (m) {
              /*新增一个被抽中的员工*/

              choosed[m.name] = 1;

              /*重新合并*/
              return m.name;
            });

          /*更新被抽中过的名单*/
          localStorage.setItem('choosed', JSON.stringify(choosed));

          return ret;
        };

        /*实例化vue*/
        let vm = new Vue({
          /*挂载*/
          el: '#app',
          /*vue的数据*/
          data: {
            /*默认的抽奖人数*/
            selected: 1,

            isRetry: false,

            /*是否正在抽奖*/
            running: 0,

            fullState: '全屏',

            /*抽奖步骤*/
            status: ['抽奖', '停！', '继续'],

            /*抽奖奖品和数量*/
            prizes: [
              {
                name: '幸运奖 乐扣乐扣水杯 10个',
                level: 3,
                number: 10,
                url: 'img/prize/8.png',
                person: '',
              },
              {
                name: '六等奖 海尔吹风机 5个',
                level: 3,
                number: 5,
                url: 'img/prize/7.png',
                person: '',
              },
              {
                name: '五等奖 海尔吸尘器 5个',
                level: 3,
                number: 5,
                url: 'img/prize/6.png',
                person: '',
              },
              {
                name: '四等奖 海尔挂烫机 5个',
                level: 3,
                number: 5,
                url: 'img/prize/5.png',
                person: '',
              },
              {
                name: '三等奖 长帝烤箱 2个',
                level: 2,
                number: 2,
                url: 'img/prize/4.png',
                person: '',
              },
              {
                name: '二等奖 华为WATCH FIT 3智能手表 2个',
                level: 2,
                number: 2,
                url: 'img/prize/3.png',
                person: '',
              },
              {
                name: '一等奖 华为MatePad2024款8GB+128GB 1个',
                level: 2,
                number: 1,
                url: 'img/prize/2.png',
                person: '',
              },
              {
                name: '特等奖 小米笔记本电脑Ultra7|32G|1TB 1个',
                level: 1,
                number: 1,
                url: 'img/prize/1.png',
                person: '',
              },
            ],
            /*正在抽第几个奖*/
            position: 0,
            /*是否展示抽奖信息*/
            showResult: false,
            /*当前是几等奖*/
            currentLevel: 0,
            /*奖品的不同样式*/
            style: [{ width: '100%' }, { width: '30%' }, { width: '20%' }],
          },
          /*生命周期-挂载完毕*/
          computed: {
            prizesRverese: function () {
              let temp = [];

              for (let i = this.prizes.length - 1; i >= 0; i--) {
                temp.push(this.prizes[i]);
              }
              console.log(temp);
              return temp;
            },
          },
          mounted() {
            /*vue实例创建完毕，开始创建词云*/
            createCanvas(this);

            /*将layer作为全局对象*/
            layui.use(['layer'], function () {
              window.layer = layui.layer;
            });
          },
          methods: {
            /*重新抽上一个奖品*/
            retryPrevious: function () {
              const that = this;

              if (that.running !== 2) {
                return;
              }

              // 确认是否要重新抽奖
              let index = layer.confirm(
                '确定要重新抽当前奖品吗？',
                function () {
                  layer.close(index);

                  // 重置当前奖品的抽奖结果
                  const shouldFilter1To16 = that.prizes.length - that.position <= 2;

                  if(shouldFilter1To16){
                    that.prizes[that.position].person = '';
                  }

                  // 重置抽奖状态
                  that.running = 0;

                  // 重新开始抽奖
                  that.toggle( true );
                }
              );
            },

            /*重置所有中奖记录
             * */
            reset: function () {
              /*如果不是待抽奖状态*/
              if (this.running != 0) {
                return;
              }

              let index = layer.confirm(
                '确定要重置么？所有之前的抽奖历史将被清除！',
                function () {
                  location.reload();
                }
              );
            },
            toggle: function ( retry ) {

                if(retry === true){
                    this.isRetry = retry;
                }
                

              console.log( '-----retry ' + retry, this.isRetry );
              // 判断奖品是否已经抽完
              if (this.position >= this.prizes.length) {
                layer.msg('所有奖品都抽完了！');
                return;
              }

              /*判断是否正在抽奖*/

              /*是否展示了抽奖结果*/
              if (this.showResult) {
                this.showResult = !this.showResult;
                /*进入待抽奖的状态*/
                this.running = 0;

                $('#main').removeClass('mask');

                return;
              }

              /*如果正在抽奖*/
              if (this.running == 1) {
                /*将词云的速度转换为正常速度*/
                TagCanvas.SetSpeed('myCanvas', speed());

                /*随机生成抽奖名单*/
                console.log(
                  '================= ' +
                    this.prizes.length +
                    '==' +
                    this.position
                );
                var ret = '' ;
                console.log( '-----number ' + this.prizes[this.position].number );
                var lotteryNumber = this.prizes[this.position].number
                if(this.isRetry){
                    lotteryNumber = 1
                }
                for(ii= 0; ii < lotteryNumber ; ii ++){
                    var ret1 = lottery(
                    this.selected,
                    this.prizes.length,
                    this.position,
                    false
                    );
                    if (ret1.length === 0) {
                        ret1 = lottery(
                        this.selected,
                        this.prizes.length,
                        this.position,
                        true
                        );
                    }
                    // console.log( '----- ' + ret1 );
                    var retM =  (ret.length === 0)?'' : (ret + ' ');
                    ret = retM + ret1
                    // console.log( '----- ' + ret );
                }
                this.isRetry = false

                // var ret = lottery(
                //   this.selected,
                //   this.prizes.length,
                //   this.position
                // );
                // var ret = lottery(
                //     this.prizes[this.position].number,
                //   this.prizes.length,
                //   this.position
                // );
                /*如果所有人都被抽中了，提示无可抽奖人员*/
                if (ret.length === 0) {
                  layer.msg('所有人都中奖了！');

                  this.running = 0;

                  return;
                } else if (this.position >= this.prizes.length) {
                  /*所有奖品抽完了，当前奖品等级0*/
                  this.currentLevel = 999;

                  this.running = 0;

                  layer.msg('所有奖品都抽完了！');
                  /*移除词云*/
                  $('#myCanvas').remove();
                  /*重新创建词云*/
                  createCanvas(this);
                  return;
                } else {
                  $('#main').addClass('mask');
                  /*显示抽奖结果*/
                  /*$('#result').find(".item2").text(ret[0]);
          $('#result').fadeIn();
          */
                  let level = '';

                  /*判断当前的奖品等级*/
                  switch (this.prizes[this.position].level) {
                    case 1:
                      level = '一等奖';
                      break;
                    case 2:
                      level = '二等奖';
                      break;
                    case 3:
                      level = '三等奖';
                      break;
                    default:
                  }

                  /*当前奖品的等级*/
                  this.currentLevel = this.prizes[this.position].level;

                  /*中奖信息*/
                  if(this.prizes[this.position].person.length > 0){
                    this.prizes[this.position].person = this.prizes[this.position].person + " " + ret;
                  }else{
                    this.prizes[this.position].person = ret;
                  }
                 

                  /*重新加载人员名单*/
                  /*移除词云*/
                  $('#myCanvas').remove();
                  /*重新创建词云*/
                  createCanvas(this);

                  /*记录中奖时间和名单到本地*/
                  localStorage.setItem(new Date().toString(), ret);
                }

                this.running = 2;

                /*进入中奖结果公式状态*/
              } else if (this.running == 2) {
                /*隐藏滤镜*/
                $('#main').removeClass('mask');

                /*进入待抽奖的状态*/
                this.running = 0;

                // 只有在不是重抽的情况下才移动到下一个奖品
                if (!this.isRetrying) {
                  this.position++; //下一个待抽奖品
                } else {
                  this.isRetrying = false; // 重置重抽标志
                }
              } else {
                /*加快词云的旋转速度*/
                TagCanvas.SetSpeed('myCanvas', [5, 1]);
                /*进入抽奖的状态*/
                this.running = 1;
              }
            },
            /*全屏切换*/
            toggleFullScreen: function () {
              /*如果不是待抽奖状态*/
              if (this.running != 0) {
                return;
              }

              if (!document.fullscreenElement) {
                this.fullState = '正常';
                document.documentElement.requestFullscreen();
              } else {
                if (document.exitFullscreen) {
                  this.fullState = '全屏';
                  document.exitFullscreen();
                }
              }
            },
            /*全屏切换*/
            toggleFullScreen: function () {
              /*如果不是待抽奖状态*/
              if (this.running != 0) {
                return;
              }

              if (!document.fullscreenElement) {
                this.fullState = '正常';
                document.documentElement.requestFullscreen();
              } else {
                if (document.exitFullscreen) {
                  this.fullState = '全屏';
                  document.exitFullscreen();
                }
              }
            },
            /*显示中奖名单*/
            showList: function () {
              /*如果正在抽奖*/
              if (this.running == 1) {
                return;
              }

              /*进入待抽奖的状态*/
              this.running = 0;

              if (this.showResult) {
                $('#main').removeClass('mask');
              } else {
                $('#main').addClass('mask');
              }

              /*确保 position 不会超出 prizes 数组的范围 */
              if (this.position >= this.prizes.length) {
                this.position = this.prizes.length - 1;
              }

              /*改变显示的状态*/
              this.showResult = !this.showResult;
            },
          },
        });
      })();
    </script>
  </body>
</html>
